@import './variables.less';
@import '../../style/mixins.less';

.fnx-toast {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: content-box;

	// hack for avoid max-width when use left & fixed
	width: var(--fnx-toast-default-width);
	max-width: var(--fnx-toast-max-width);
	min-height: var(--fnx-toast-default-min-height);
	padding: var(--fnx-toast-default-padding);
	color: var(--fnx-toast-text-color);
	font-size: var(--fnx-toast-font-size);
	line-height: var(--fnx-toast-line-height);

	// allow newline charactor
	white-space: pre-wrap;
	text-align: center;
	word-wrap: break-word;
	background-color: var(--fnx-toast-background-color);
	border-radius: var(--fnx-toast-border-radius);

	&--unclickable {
		// lock scroll
		overflow: hidden;

		// should not add pointer-events: none directly to body tag
		// that will cause unexpected tap-highlight-color in mobile safari
		* {
			pointer-events: none;
		}
	}

	&--top {
		top: var(--fnx-toast-position-top-distance);
	}

	&--bottom {
		top: auto;
		bottom: var(--fnx-toast-position-bottom-distance);
	}

	&--text {
		width: fit-content;
		min-width: var(--fnx-toast-text-min-width);
		min-height: 0;
		padding: var(--fnx-toast-text-padding);

		.fnx-toast__message {
			margin-top: 0;
		}
	}

	&__icon {
		font-size: var(--fnx-toast-icon-size);
	}

	&__message {
		margin-top: var(--fnx-padding-xs);
	}
}
